import { BASE_PATH,API } from "@/config"
import { Application,AnimatedSprite, Text, TextStyle, Container, SCALE_MODES } from "pixi.js"
import { useEffect, useRef, useState } from "react"

const PrizeBox = ({money}) => {
    // const animatedSpriteRef = useRef()
    const [tipsMsg, setTipsMsg] = useState('')
    useEffect(() => {
        const app = new Application({
            backgroundAlpha: 0,
            width: global.innerWidth,
            height: 300,
            antialias: true,
            // resolution: global.devicePixelRatio||1,
            
        })
        const frames = []
        for(let i = 0; i<=16;i++) {
            app.loader.add(`prize-${i}`, `${BASE_PATH}/img/game/prize/prize-${i}.png`)
            frames.push(`prize-${i}`)
        }
        app.loader.load(() => {
            const animatedSprite = AnimatedSprite.fromFrames(frames)
            
            animatedSprite.textures.forEach(texture => {
                // texture.baseTexture = SCALE_MODES.LINEAR
                texture.baseTexture.mipmap = true;
            });
            // animatedSprite.texture.baseTexture = SCALE_MODES.LINEAR
    //         animatedSprite.textures.map((texture) => {
    //             const resizedTexture = texture.clone(); // 克隆原始纹理
    // resizedTexture.frame.width /= 10; // 调整宽度
    // resizedTexture.frame.height /= 10; // 调整高度
    // return resizedTexture;
    //         })
            const container = new Container()
            animatedSprite.anchor.set(0.5, 0.5)
            animatedSprite.scale.set(0.2)
            animatedSprite.animationSpeed = 0.5
            animatedSprite.loop = false
            animatedSprite.x = app.renderer.width /2
            animatedSprite.y = app.renderer.height /2
            animatedSprite.play()
            
            // animatedSpriteRef.current = animatedSprite
            // const textStyle = new TextStyle({
            //     fill: ['#ffffff'],
            //     stroke: '#ffffff',
            //     fontSize: '2rem',
            //     fontFamily: 'ChangAnunitype-Bold'
            // })
            // const text = new Text(`恭喜您获得${money}源宝`,textStyle)
            // text.scale.set(1)
            // text.style = 
            // text.x = app.renderer.width/2 - text.width/2
            container.addChild(animatedSprite)
            app.stage.addChild(container)
            animatedSprite.onComplete = () => {
                setTipsMsg(`恭喜您获得${money}源宝`)
                // container.addChild(text)
            }
            
        })
        
        document.querySelector('#prize-box').appendChild(app.view)
        return () => {
            app.destroy(true, true)
        }
    }, [])
    return (
        <div>
            <div className="text-center text-qy-bold" style={{fontSize:'2rem',position:'absolute',left:'50%',transform:'translateX(-50%)',color:'#fff'}}>{tipsMsg}</div>
            <div id="prize-box">
                
            </div>
        </div>
    )
}

export default PrizeBox